<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/moneyManage/addClass_alert.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/alert.css">
</script>

<style scoped>
  .layui-laydate-content>.layui-laydate-list {
    padding-bottom: 0px;
    overflow: hidden;
  }

  .layui-laydate-content>.layui-laydate-list>li {
    width: 50%
  }

  .merge-box .scrollbox .merge-list {
    padding-bottom: 5px;
  }

  .addClassManage {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .layui-form-item{
    position: relative;
  }
 .Falge,.Falge2{
    font-size: 18px;
    color: red;
 }
 .Falge{
    position: absolute;
    top: 3px;
    left: 8px;
 }
 .Falge2{
    position: absolute;
    top: 3px;
    left: 29px;
 }
</style>

<body>
  <div class="layui-form row" lay-filter="layuiadmin-form-project" id="layuiadmin-form-project">
    <div class="layui-form-item">
      <label class="layui-form-label"><i class="Falge">*</i>班次名称：</label>
      <div class="layui-input-block">
        <input type="text" name="tcShftName" autocomplete="off" class="layui-input" lay-verify="required">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label"><i class="Falge">*</i>上班时间：</label>
      <div class="layui-input-block">
        <input type="text" name="tcShftStart1" autocomplete="off" class="layui-input data" id="tcShftStart1"
          style="cursor:pointer;" lay-verify="required">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label"><i class="Falge">*</i>下班时间：</label>
      <div class="layui-input-block">
        <input type="text" name="tcShftEnd1" autocomplete="off" class="layui-input data" id="tcShftEnd1"
          style="cursor:pointer;" lay-verify="required">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label"><i class="Falge2">*</i>厂房：</label>
      <div class="layui-input-block">
        <select name="tcShftFactory" lay-filter="tcShftFactory" lay-search id="selectThree" lay-verify="required">

        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">楼层：</label>
      <div class="layui-input-block">
        <select name="tcShftFloor" lay-filter="" lay-search id="selectFour">
          <option value=""></option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">站别:</label>
      <div class="layui-input-block">
        <select name="tcShftProcess" lay-filter="" lay-search id="selectOne">
          <option value=""></option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">线别:</label>
      <div class="layui-input-block">
        <select name="tcShftLine" lay-filter="" lay-search id="selectTwo">
          <option value=""></option>
        </select>
      </div>
    </div>

    <div class="footer layui-btn-container">
      <div class="layui-form-item">
        <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-filter="layuiadmin-app-form-submit"
          lay-submit>确定</button>
        <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
      </div>
    </div>
  </div>
</body>
<script>

  layui.use(['admin', 'form', 'user', 'api', 'table', 'utill', 'view', 'laypage', 'laytpl', 'laydate', 'jquery', 'layer'], function () {
    var table = layui.table,
      setter = layui.setter,
      laytpl = layui.laytpl,
      api = layui.api,
      utill = layui.utill,
      form = layui.form,
      element = layui.element,
      laypage = layui.laypage,
      form = layui.form,
      admin = layui.admin,
      view = layui.view,
      laytpl = layui.laytpl,
      laypage = layui.laypage,
      laydate = layui.laydate,
      layer = layui.layer,
      $ = layui.$;
    // 在一次渲染from
    form.render();
    // 站别
    admin.req({
      type: 'post',
      url: api.host + api.selectFiaProcId,
      dataType: 'json',
      contentType: 'application/json',
      success: function (response) {
        var datas = response.data;
        if (datas != null || datas.size > 0) {
          var _select = "<option></option>";
          datas.forEach((item) => {
            _select += `<option value="${item.tcProcId}">${item.tcProcName}</option>`
          })
          $("#selectOne").html(_select);
          form.render();
        }
      }
    });

    // 线别
    view.req({
      type: 'post',
      url: api.host + api.selectFiaLineId,
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (data) {
        var list = data.data;
        if (list != null || list.size > 0) {
          var _list = '<option></option>';
          list.forEach((item) => {
            _list += `<option value=${item.tcLineId}>${item.tcLineName}</option>`
          })
          $("#selectTwo").html(_list);
          form.render('select');
        }
      }
    });

    // 厂房
    var ftyName = {};
    admin.req({
      url: api.host + api.selectGSFty,
      data: ftyName,
      type: "POST",
      dataType: 'json',
      contentType: 'application/json',
      done: function (res) {
        var datas = res.data;
        if (datas != null || datas.size > 0) {
          var _cF = "<option></option>";
          datas.forEach((item) => {
            _cF += `<option value=${item.tcFtyId}>${item.tcFtyName}</option>`
          })
          $("#selectThree").html(_cF);
          form.render('select');
        }
      }
    });

    // 楼层
    form.on('select(tcShftFactory)', function (data) {
      var tcFtyId = $("#selectThree").val();
      admin.req({
        url: api.host + api.selectFtyFlr,
        // 第一个后台规定   第二个是自己定义或后台获取的
        data: { "ftyId": tcFtyId },
        type: "get",
        success: function (res) {
          var msg = res.data;
          if (msg != null || msg.size > 0) {
            var _msg = '<option></option>';
            msg.forEach((item) => {
              _msg += `<option value=${item.tcFlrId}>${item.tcFlrName}</option>`
            })
            $("#selectFour").html(_msg);
            form.render('select');
          }
        }
      });
    });



    // 时间组件（上班时间）
    laydate.render({
      elem: '#tcShftStart1'
      , type: 'time'
      , trigger: 'click'
      , format: 'HH:mm'  //保留时分
      , btns: ['confirm', 'clear']
      , ready: formatminutes
    });

    // 下班时间
    laydate.render({
      elem: '#tcShftEnd1'
      , type: 'time'
      , trigger: 'click'
      , format: 'HH:mm'  //保留时分
      , btns: ['confirm', 'clear']
      , ready: formatminutes
    });

    function formatminutes(date) {
      var aa = $(".laydate-time-list li ol")[1];
      var showtime = $($(".laydate-time-list li ol")[1]).find("li");
      for (var i = 0; i < showtime.length; i++) {
        var t00 = showtime[i].innerText;
        if (t00 != "00" && t00 != "20" && t00 != "30" && t00 != "40" && t00 != "50") {
          //分进行过滤 只保留0 10 20 30 40 50 一次性显示六十个太多没必要
          showtime[i].remove()
        }
      }
      $($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒
    }
  })
</script>